<template>
  <div class="mx-container">
    <!-- <zz-sub-nav :list="list" :index.sync="index" @change="handleChange" title="产品分类">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{$t('zz.intro.title')}}</div>
          <div>
            <zz-card>
              <img :src="require('@/assets/img/intro/intro1.png')" alt="" slot="img" width="375">
              <span slot="title">{{$t('zz.intro.1.title')}}</span>
              <span slot="content">{{$t('zz.intro.1.des')}}</span>
            </zz-card>

            <zz-card class="marginTop">
              <span slot="title">{{$t('zz.intro.2.title')}}</span>
              <span slot="content">{{$t('zz.intro.2.des')}}</span>
              <img :src="require('@/assets/img/intro/intro2.png')" alt="" slot="img" width="375">
            </zz-card>

            <zz-card class="marginTop">
              <span slot="title">{{$t('zz.intro.3.title')}}</span>
              <span slot="content">{{$t('zz.intro.3.des')}}</span>
              <img :src="require('@/assets/img/intro/intro3.png')" alt="" slot="img" width="375">
            </zz-card>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.intro.team.title')}}</div>
          <div class="flex top-card-wrap">
            <div>
              <zz-card position="top" :border="true">
                <img :src="require('@/assets/img/intro/team1.png')" alt="" slot="img">
                <span slot="title">{{$t('zz.intro.team.1.h')}}</span>
                <span slot="content">{{$t('zz.intro.team.1.p')}}</span>
              </zz-card>
            </div>
            <div>
              <zz-card position="top" :border="true">
                <img :src="require('@/assets/img/intro/team2.png')" alt="" slot="img">
                <span slot="title">{{$t('zz.intro.team.2.h')}}</span>
                <span slot="content">{{$t('zz.intro.team.2.p')}}</span>
              </zz-card>
            </div>
            <div class="marginTop">
              <zz-card position="top" :border="true">
                <img :src="require('@/assets/img/intro/team3.png')" alt="" slot="img">
                <span slot="title">{{$t('zz.intro.team.3.h')}}</span>
                <span slot="content">{{$t('zz.intro.team.3.p')}}</span>
              </zz-card>
            </div>
            <div class="marginTop">
              <zz-card position="top" :border="true">
                <img :src="require('@/assets/img/intro/team4.png')" alt="" slot="img">
                <span slot="title">{{$t('zz.intro.team.4.h')}}</span>
                <span slot="content">{{$t('zz.intro.team.4.p')}}</span>
              </zz-card>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.intro.contact')}}</div>
          <div class="map-wrap">
            <div class="map-point" style="top:83%;left:72.53%;">{{$t('zz.intro.contact.5')}}</div>
            <div class="map-point" style="top:63.85%;left:76.81%;">{{$t('zz.intro.contact.3')}}</div>
            <div class="map-point" style="top:40.22%;left:67.9%;">{{$t('zz.intro.contact.1')}}</div>
            <div class="map-point" style="top:64.94%;left:49.11%;">{{$t('zz.intro.contact.2')}}</div>
            <div class="map-point topName" style="top:82.22%;left:65.04%;">{{$t('zz.intro.contact.4')}}</div>
            <div class="map-point" style="top:89.85%;left:64.76%;">{{$t('zz.intro.contact.6')}}</div>
            <img src="@/assets/img/intro/intro3-1.png" alt="">
          </div>
          
          <ul class="intro-details">
            <li>QQ：{{qq}}</li>
            <li>{{$t('zz.WX')}}：{{wx}}</li>
            <li>{{$t('zz.phone')}}：{{phone}}</li>
          </ul>
        </div>
      </div>
    </zz-sub-nav> -->
    <div class="sub-nav-wrap" :class="{'fixed': fixed == 1, 'fbottom': fixed == 2}" ref="wrapRef">
      <div v-if="title" class="nav-title">
        <div class="__title">产品分类</div>
        <div class="__anv">12，3，4，5</div>
      </div>
      <ul ref="ulRef" v-if="isPC" :class="{'hasTitle': title !== ''}">
        <li v-for="it in list"  :key="it.index" :class="{'active': it.index == index}" @click="handleChange(it)">{{it.name}}</li>
      </ul>
      <div class="nav-content-wrap" ref="contentRef">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import { mapGetters } from 'vuex'

export default {
  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
  },
  data() {
    return {
      index: 1,
      fixed: 0
    };
  },

  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      console.log(this.list[this.index]);
      this.subIndex = activeItem.child ? activeItem.child[0].index : 1;
      return activeItem;
    },
    list: function(){ return [
        { name: this.$t('zz.intro.mall.1.title'), index: 1 },
        { name: this.$t('zz.intro.mall.2.title'), index: 2 },
        { name: 'CDN', index: 3 },
        { name: this.$t('zz.intro.mall.4.title'), index: 4 },
      ]
    },
    ...mapGetters({
      isPC:'isPC'
    })
  },
  watch: {},
  methods: {
    handleChange(a_index){
      console.log(a_index)
      this.index = a_index
    }
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.top-card-wrap {
  flex-wrap: wrap;
  justify-content: space-between;
  & > div {
    width: 41%;
    &:nth-child(2n) {
      margin-right: 75px;
    }
  }
}
.sub-nav-content {
  width: 937px;
  padding: 70px;
}

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
  }
}
.intro-details{
  li{
    font-size: 16px;
    line-height: 200%;
  }
}
.map-wrap{
  position: relative;
  .map-point{
    position: absolute;
    font-weight: bold;
    padding-top: 3px;
    font-size: 14px;
    margin-top: -12px;
    &::before{
      content:'';
      // display: block;
      position: absolute;
      
      top:0;
      left:50%;
      transform: translate(-50%,0);
      width:12px;
      height: 12px;
      background-color: $primary;
      margin-top: -9px;
      border-radius: 6px;
    }
    &::after{
      content:'';
      // display: block;
      position: absolute;
      
      top:0;
      left:50%;
      transform: translate(-50%,0);
      width:8px;
      height: 8px;
      background-color: transparent;
      border: 1px solid #fff;
      margin-top: -7px;
      border-radius: 5px;
    }

    &.topName{
      padding-top: 0;
      padding-bottom: 12px;
      &::before{
        bottom:0;
        top: auto;
      }
      &::after{
        bottom:2px;
        top: auto;
      }
    }
  }
}

@media screen and (max-width:768px) {
  .top-card-wrap{
    & > div{
       width: 48%;
      &:nth-child(2n){
        margin-right: 0;
      }
    }
  }
  .map-point{
    font-size: 12px !important;
    transform: scale(.8);
    margin-top: -8px !important;
    &::before{
      content:'';
      // display: block;
      position: absolute;
      
      top:0;
      left:50%;
      transform: translate(-50%,0);
      width:8px  !important;
      height: 8px !important;
      background-color: $primary;
      margin-top: -9px;
      border-radius: 6px;
    }
    &::after{
      width:4px !important;
      height: 4px !important;
    }

    &.topName{
      padding-top: 0;
      padding-bottom: 5px;
    }
  }
  .intro-details{
    li{
      font-size: .25rem;
    }
  }
}
</style>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-wrap{
  position: relative;
  --width: 260px;
  --height: 40px;
  .nav-title{
    display: flex;
    line-height: var(--height);
    .__title{
      width: var(--width);
      height: var(--height);
      background-color: #2A82E4;
      color: #fff;
      
      text-align: center;
    }
    .__anv{
      padding-left: 3px;
      height: var(--height)
    }
  }

  &>ul{
    position: absolute;
    top: 0;
    left: 0;
    &.hasTitle{
      top: var(--height);
    }
    &>li{
      position: relative;
      width: var(--width);
      height: 81px;
      font-size: 16px;
      line-height: 81px;
      text-align: center;
      border: 1px solid #ccc;
      border-left: none;
      cursor: pointer;
      font-weight: 700;
      &::after{
        content:"";
        position: absolute;
        left: 35px;
        top:38px;
        width: 5px;
        height: 5px;
        background-color: #000;
        border-radius: 10px;
      }
      &.active{
        font-weight: bold;
        color:$primary;
        &:before{
          content:"";
          position: absolute;
          right: -1px;
          top: 0;
          bottom: 0;
          width: 3px;
          background-color: $primary;
        }
      }
      &:nth-child(n+1){
        margin-top: -1px;
      }
    }
    
  }
  .nav-content-wrap{
    flex: 1;
    padding: 50px 0;
    margin-left: calc(var(--width) + 3px);
    // min-height:200px;
    // max-height: 500px;
    // overflow-y: scroll;
  }

  &.fixed{
    &>ul{
      position: fixed;
      top: 74px;
      left:auto;
      background-color: #fff;
    }
    .nav-content-wrap{
      margin-left: 263px;
    }
  }

  &.fbottom{
    &>ul{
      position: absolute;
      bottom: 0;
      top: auto;
    }
    .nav-content-wrap{
      margin-left: 263px;
    }
  }
}
@media screen and (max-width:768px) {
  .sub-nav-wrap{
    // padding: 0 .2rem;
    .nav-content-wrap{
      margin-left: 0;
      padding: .2rem 0;
      .sub-nav-content{
        padding: .2rem 0;
      }
    }
  }
  
}
</style>